<template>
  <div class="test-api-page">
    <van-nav-bar title="API测试" left-arrow @click-left="$router.back()" />
    
    <div class="test-section">
      <van-cell-group title="登录接口测试" inset>
        <van-field
          v-model="testForm.username"
          label="用户名"
          placeholder="请输入用户名"
        />
        <van-field
          v-model="testForm.password"
          type="password"
          label="密码"
          placeholder="请输入密码"
        />
        <van-cell>
          <template #value>
            <van-button type="primary" @click="testLogin" :loading="loading">
              测试登录
            </van-button>
          </template>
        </van-cell>
      </van-cell-group>
      
      <van-cell-group title="测试结果" inset>
        <van-cell title="状态" :value="testResult.status" />
        <van-cell title="消息" :value="testResult.message" />
        <van-cell title="数据" :value="testResult.data" />
      </van-cell-group>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { loginAPI } from '@/api/auth'

const loading = ref(false)
const testForm = reactive({
  username: 'admin',
  password: '123456'
})

const testResult = reactive({
  status: '未测试',
  message: '',
  data: ''
})

const testLogin = async () => {
  loading.value = true
  testResult.status = '测试中...'
  testResult.message = ''
  testResult.data = ''
  
  try {
    const response = await loginAPI.loginWithPassword(
      testForm.username,
      testForm.password,
      1
    )
    
    testResult.status = '成功'
    testResult.message = response.message || '登录成功'
    testResult.data = JSON.stringify(response.data || response, null, 2)
  } catch (error) {
    testResult.status = '失败'
    testResult.message = error.message || '请求失败'
    testResult.data = error.response?.data ? JSON.stringify(error.response.data, null, 2) : ''
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.test-api-page {
  padding-bottom: var(--spacing-lg);
}

.test-section {
  margin: var(--spacing-md);
}
</style>
